<template>
  <div class="lottory-with-icon button-unselected">
    <div class="box-inner">
      <div class="box-top">
        <div class="left">
          <span class="icon">
            <i class="iconfont" :class="number.icon"></i>
          </span>
          <span class="context">{{number.number}}</span>
        </div>
        <span class="parameter">{{number.parameter[this.activeSwitchIndex].number}}</span>
      </div>
      <div class="box-bottom">
        <div class="balls">
          <span 
            :key="index"
            class="ball"
            :class="addClass(num)"
            v-for="(num, index) in number.numbers.split(',')">
            {{num}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let red = [1, 2, 3, 4, 5, 6, 7, 8, 9 ,10, 11, 12, 13, 14, 15, 16]
let green = [17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33]
let blue = [34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]
export default {
  props: {
    number: {
      type: Object
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
     
    }
  },
  methods: {
    addClass(num) {
      let className = red.indexOf(parseInt(num)) > -1 ? 'red' 
        : green.indexOf(parseInt(num)) > -1 ? 'green'
        : blue.indexOf(parseInt(num)) > -1 ? 'blue'
        : 'default'
      return className
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .lottory-with-icon
    box-sizing border-box 
    padding 5px 10px
    cursor pointer
    .box-inner 
      display flex 
      flex-direction column
      .box-top 
        display flex 
        align-items center
        justify-content space-between
        .left 
          display flex 
          align-items center
          .icon 
            display inline-block 
            margin-right 10px 
            text-align center
            .iconfont 
              font-size 18px
              background-image: -webkit-linear-gradient(-15deg,rgba(210,152,26,1),rgba(243,211,105,1));
              -webkit-background-clip text
              -webkit-text-fill-color transparent
    .box-bottom 
      margin-top 5px
      .balls 
        display flex
        justify-content center
        .ball 
          width 20px
          height 20px 
          font-size 13px
          font-family ArialMT
          color #fff
          border-radius 50%
          text-align center
          line-height 20px
          box-sizing border-box 
          margin-right 5px
          &.red 
            background $color-ball-red
          &.green 
            background $color-ball-green 
          &.blue 
            background $color-ball-blue

        
           
</style>